<template>
    <div>
        {{ student.name }}-{{ student.age }}-{{ student.gender }}
    </div>
</template>

<script>
import { reactive, watch } from 'vue';


export default {
    setup() {
        let student = reactive({
            name: '张三',
            age: 22,
            gender: '男'
        })
        watch(student, (newValue, oldValue) => {
            // 对象是引用传递的，所以这块old和new是同一个值
            console.log(oldValue);
            console.log(newValue);
        }, {
            immediate: true
        });

        setTimeout(() => {
            student.name = '李四';
        }, 2000);

        return {
            student
        }
    }
}
</script>